<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🎭 智能童话书 - AI故事创作助手</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #6f42c1;
            --secondary-color: #fd7e14;
            --success-color: #20c997;
            --info-color: #0dcaf0;
        }
        
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        .hero-section {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            margin: 20px 0;
            padding: 40px;
        }
        
        .feature-card {
            background: linear-gradient(145deg, #ffffff, #f8f9fa);
            border: none;
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            height: 100%;
        }
        
        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }
        
        .story-form {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .btn-generate {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border: none;
            border-radius: 25px;
            padding: 12px 30px;
            font-weight: bold;
            color: white;
        }
        
        .story-display {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
            min-height: 300px;
        }
        
        .stats-card {
            background: linear-gradient(135deg, var(--success-color), var(--info-color));
            color: white;
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            margin: 10px 0;
        }
        
        .spin {
            animation: spin 2s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <!-- 头部区域 -->
        <div class="row">
            <div class="col-12">
                <div class="hero-section text-center">
                    <h1 class="display-4 mb-4">
                        <i class="bi bi-magic"></i> 智能童话书
                    </h1>
                    <p class="lead mb-4">
                        🧠 基于ERNIE-4.5智能引擎 | 🎭 三幕式故事结构 | 💝 情感智能分析
                    </p>
                    
                    <!-- 统计信息 -->
                    <div class="row">
                        <div class="col-md-3">
                            <div class="stats-card">
                                <h3 id="totalStories">{{ stats.total_stories }}</h3>
                                <p>📚 生成故事</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stats-card">
                                <h3 id="userSessions">{{ stats.user_sessions }}</h3>
                                <p>👥 用户会话</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stats-card">
                                <h3 id="averageRating">{{ "%.1f"|format(stats.average_rating) }}</h3>
                                <p>⭐ 平均评分</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="stats-card">
                                <h3 id="systemStatus">🟢</h3>
                                <p>🚀 系统状态</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 功能特色区域 -->
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="feature-card card p-4 text-center">
                    <i class="bi bi-brain display-4 text-primary mb-3"></i>
                    <h5>🧠 智能故事结构</h5>
                    <p>采用三幕式故事结构，确保情节连贯性和逻辑性</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card card p-4 text-center">
                    <i class="bi bi-heart display-4 text-danger mb-3"></i>
                    <h5>💝 情感智能分析</h5>
                    <p>深度分析故事情感走向，传递正能量和教育价值</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card card p-4 text-center">
                    <i class="bi bi-people display-4 text-success mb-3"></i>
                    <h5>🎭 角色心理系统</h5>
                    <p>为每个角色构建完整的心理档案和成长轨迹</p>
                </div>
            </div>
        </div>
        
        <!-- 主要内容区域 -->
        <div class="row">
            <!-- 故事生成表单 -->
            <div class="col-lg-4">
                <div class="story-form">
                    <h4 class="mb-4"><i class="bi bi-pencil-square"></i> 创作您的智能童话</h4>
                    
                    <form id="storyForm">
                        <div class="mb-3">
                            <label class="form-label">📖 故事主题</label>
                            <select class="form-select" id="theme" name="theme">
                                <option value="友谊">🤝 友谊与合作</option>
                                <option value="勇气">💪 勇气与冒险</option>
                                <option value="智慧">🧠 智慧与学习</option>
                                <option value="善良">💖 善良与帮助</option>
                                <option value="创新">💡 创新与想象</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">🎭 主要角色</label>
                            <input type="text" class="form-control" id="characters" 
                                   placeholder="例如：小兔子,小松鼠" value="小兔子,小松鼠">
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">👶 适合年龄</label>
                            <select class="form-select" id="ageGroup">
                                <option value="3-5岁">3-5岁 (幼儿)</option>
                                <option value="6-8岁" selected>6-8岁 (学龄前)</option>
                                <option value="9-12岁">9-12岁 (小学生)</option>
                            </select>
                        </div>
                        
                        <button type="submit" class="btn btn-generate w-100">
                            <i class="bi bi-magic"></i> 生成智能童话故事
                        </button>
                    </form>
                </div>
            </div>
            
            <!-- 故事显示区域 -->
            <div class="col-lg-8">
                <div class="story-display">
                    <div id="welcomeMessage" class="text-center">
                        <i class="bi bi-book display-1 text-muted mb-4"></i>
                        <h3 class="text-muted">欢迎来到智能童话世界！</h3>
                        <p class="lead text-muted">
                            选择您喜欢的主题和角色，让AI为您创造一个独特的童话故事。
                        </p>
                    </div>
                    
                    <div id="loadingMessage" class="text-center" style="display: none;">
                        <div><i class="bi bi-gear-fill spin" style="font-size: 2rem; color: #6f42c1;"></i></div>
                        <h4 class="mt-3">🧠 AI正在创作您的专属童话...</h4>
                    </div>
                    
                    <div id="storyContent" style="display: none;">
                        <!-- 故事内容将在这里显示 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/enhanced_story.js"></script>
</body>
</html>